/**
 * Created by xiniu on 2017/9/1.
 * 公共模块
 */

import React, { Component, PropTypes } from 'react';
import {
    Image,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Modal,
    Dimensions,
} from 'react-native';

import moment from 'moment';
import Toast from 'react-native-simple-toast';
import AppService from '../../service/AppService';
import RString from '../../language/RString';
import FounderList from "./FounderList";
import {getPassportId} from '../../service/rpc';

export default class SuggestContent extends Component {
    // 初始化
  constructor(props) {
    super(props);
    this.state = {
      userId: '',
      userName: '',
      suggest: {},
      suggestPersonName: '',
      imageList: [],
      defaultImg: null,
      modalShow: false,
      filePath: null,
      projectTypeParentName:'',
    };
  }

  filterStatus(status) {
    switch (status) {
      case 'TO_ACCEPT':
        return RString('toaccept');
        break;
      case 'TO_DEAL':
        return RString('todeal');
        break;
      case 'TO_CLOSE':
        return RString('toclose');
        break;
      case 'CLOSED':
        return RString('closed');
        break;
      case 'REOPEN':
        return RString('reopen');
        break;
    case 'TO_EXAMINE':
        return RString('toexamine');
        break;
      default:
        return RString('newCreate');
        break;
    }
  }

  componentWillMount() {
    getPassportId().then((result) => {
      AppService.getPassport({ id: result }).then((data) => {
        global.tenantId = data.passport.tenantId;
        this.state.userName = data.passport.userName;
      });
    },
        ).catch((error) => {
          console.log(error);
        });
    const vm = {
      tenantId: global.tenantId,
      id: this.props.suggestId,
    };
    const _this = this;
    AppService.getSuggest(vm).then((data) => {
      if (!!data.errors === true && !!data.errors.length > 0) {
        Toast.show(data.errors[0].message);
      } else {
        _this.props.judgeProject(data.suggest);
        _this.setState({
          suggest: data.suggest || {},
        });
        AppService.getSuggestPerson({ tenantId: global.tenantId, id: data.suggest.suggestPersonId }).then((result) => {
          if (!!result.errors === true && !!result.errors.length > 0) {
            Toast.show(result.errors[0].message);
          } else {
            _this.setState({
              suggestPersonName: result.user.name || '',
            });
          }
        });
        const vm = {
          businessType: 'DOCK',
          businessId: _this.state.suggest.id,
        };
                // 获取该提案的图片
        AppService.getUploadImage(vm).then((data) => {
          if (!!data.errors === true && !!data.errors.length > 0) {
            Toast.show(data.errors[0].message);
          } else {
            _this.setState({
              imageList: data.attachmentList,
            });
            if (this.state.imageList.length === 0) {
              _this.setState({
                defaultImg: <Image style={styles.uploadImg} source={require('../img/addImage.png')} />,
              });
            }
          }
        });
      }
    });
    // 获取项目根节点名称
      AppService.searchBusinessImpact({ pageSize: 0, tenantId: global.tenantId,dbType:1 }).then((data) => {
        for (let i = 0; i < data.result.length; i++) {
          if(data.result[i].parentId ==null || data.result[i].parentId ==0){
            //项目类型根节点名称
           this.setState({
              projectTypeParentName: data.result[i].businessImpactName,
            });
          }
        }
      });
  }

  enlargeImg(url) {
    this.setState({
      modalShow: true,
      filePath: url,
    });
  }

  closeModal() {
    this.setState({
      modalShow: false,
    });
  }

  renderImage = (v, i) => (
    <TouchableOpacity onPress={() => this.enlargeImg(v.filePath)} key={i}>
      <Image style={styles.uploadImg} source={{ uri: v.filePath }} />
    </TouchableOpacity>
        );

  loadFounderList(){
     if(this.state.suggest.status==='TO_ACCEPT'){
        return(
            <View/>
        )
     }else{
        return(
            <View>
                <View style={styles.comment}>
                   <Text style={{ color:'#000' }}>{RString('processing_person')}</Text>
                </View>
                <FounderList suggestId={this.props.suggestId} />
            </View>
        )

     }
  }

  render() {
    const suggest = this.state.suggest;
    return (
    <View>
      <View style={styles.detailWrap}>
        <Modal
          animationType="slide"
          transparent
          visible={this.state.modalShow}
          onShow={() => {}}
          onRequestClose={() => {}}
        >
          <TouchableOpacity activeOpacity={1} style={styles.modalLayout} onPress={() => { this.closeModal(); }}>
            <Image style={styles.modalView} source={{ uri: `${this.state.filePath}?x-oss-process=image/resize,m_lfit,w_640,h_640` }} resizeMode="contain" />
          </TouchableOpacity>
        </Modal>
        <View style={styles.detailTop}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/theme.png')} />
          </View>
          <View style={{ flex: 8, paddingTop: 15, paddingBottom: 15 }}>
            <Text style={styles.detailFontBold} numberOfLines={1}>{suggest.suggestTitle}</Text>
          </View>
        </View>
        <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/record.png')} />
          </View>
          <View style={styles.wordWrap}>
            <Text style={styles.detailFont}>{suggest.suggestContent}</Text>
          </View>
        </View>
        <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/person.png')} />
          </View>
          <View style={styles.wordWrap}>
            <View style={{ flex: 5 }}>
              <Text style={styles.detailFont} numberOfLines={1}>{this.state.suggestPersonName}{RString('submit')}</Text>
            </View>
            <View style={{ flex: 6, flexDirection: 'row', justifyContent: 'flex-end' }}>
              <Text style={styles.detailTime}>{moment(new Date(Number(suggest.suggestTime))).format('YYYY/MM/DD HH:mm')}</Text>
            </View>
          </View>
        </View>
        <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/floor.png')} />
          </View>
          <View style={styles.wordWrap}>
            <Text style={styles.detailFont} numberOfLines={1}>{suggest.suggestType}</Text>
          </View>
        </View>
         <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/suggestTypeChild.png')} />
          </View>
          <View style={styles.wordWrap}>
            <Text style={styles.detailFont} numberOfLines={1}>{suggest.suggestTypeChild}</Text>
          </View>
       </View>
        <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/businessImpact.png')} />
          </View>
          <View style={styles.wordWrap}>
            <Text style={styles.detailFont} numberOfLines={1}>{suggest.businessImpactName}</Text>
          </View>
       </View>
        <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/clock.png')} />
          </View>
          <View style={styles.wordWrap}>
            <Text style={styles.detailFont}>{this.filterStatus(suggest.status)}</Text>
          </View>
        </View>
        <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/image.png')} />
          </View>
          <View style={[styles.wordWrap, { flexWrap: 'wrap', paddingLeft: 5, paddingBottom: 5 }]}>
            {this.state.imageList.map((v, i) => this.renderImage(v, i))}
            { this.state.defaultImg }
          </View>
        </View>
        <View style={styles.detail}>
          <View style={styles.imgWrap}>
            <Image style={styles.themeImg} source={require('../img/project.png')} />
          </View>
          <View style={styles.lastWordWrap}>
            <Text style={styles.detailFont}>{suggest.isProject ? this.state.projectTypeParentName +':是': +this.state.projectTypeParentName+ ':非'}</Text>
          </View>
        </View>
         <View style={styles.detail}>
               <View style={styles.imgWrap}>
                 <Image style={styles.themeImg} source={require('../img/projectType.png')} />
               </View>
               <View style={styles.wordWrap}>
                 <Text style={styles.detailFont} numberOfLines={1}>{suggest.isProject==false? '无':  suggest.projectName}</Text>
               </View>
         </View>

      </View>

      {this.loadFounderList()}

    </View>
    );
  }
}

const styles = StyleSheet.create({
  modalLayout: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    backgroundColor: 'rgba(0,0,0,.8)',
  },
  modalView: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  wrap: {
    backgroundColor: '#fff',
  },
  detailWrap: {
    flex: 1,
    paddingLeft: 10,
    paddingRight: 10,
  },
  detail: {
    paddingLeft: 10,
    paddingRight: 6,
    flexDirection: 'row',
  },
  detailTop: {
    paddingLeft: 10,
    paddingRight: 6,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderBottomColor: '#eee',
    flexDirection: 'row',
  },
  imgWrap: {
    flex: 1,
    justifyContent: 'center',
  },
  themeImg: {
    width: 14,
    height: 14,
    marginLeft: 6,
    marginTop: 2,
  },
  wordWrap: {
    flex: 8,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderBottomColor: '#eee',
    paddingTop: 15,
    paddingBottom: 15,
    flexDirection: 'row',
  },
  lastWordWrap: {
    flex: 8,
    paddingTop: 15,
    paddingBottom: 15,
    flexDirection: 'row',
  },
  detailFont: {
    fontSize: 16,
    color: '#000',
  },
  detailFontBold: {
    fontSize: 16,
    color: '#000',
  },
  detailTime: {
    fontSize: 14,
    color: '#999',
  },
  uploadImg: {
    width: 80,
    height: 80,
    marginRight: 10,
    marginBottom: 10,
  },
  comment:{
          flex:1,
          height:25,
          paddingLeft:20,
          paddingRight:20,
          backgroundColor:'#ECECF1',
          justifyContent: 'center'
      },
});
